<template>
  <div class="input-selecttext">
    <input :value="inputValue" type="text" :maxlength="config.extra.limit && config.extra.limit[1]" :id="config.id" :name="config.name" :placeholder="config.extra.placeHolder" @input="onInput">
    <select :value="basisValue" :id="config.id" :name="config.name" :prompt="config.extra.prompt" @change="onChange">
        <option v-for="option in config.extra.option" :value="option.value" :disabled="option.disabled">{{option.key}}</option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'inputSelectText',
  props: ['config', 'value'],
  data(){
    return {
      inputValue:this.value.split("-") && this.value.split("-")[0],
      basisValue:this.value.split("-") && this.value.split("-")[1]
    }
  },
  methods: {
    onInput(e) {
      this.inputValue = e.target.value;
      this.$emit('input', { value: this.inputValue +"-"+ this.basisValue });
    },
    onChange(e) {
      this.basisValue = e.target.value;
      this.$emit('input', { value: this.inputValue +"-"+ this.basisValue });
    }
  }
};
</script>

<style lang="less" scoped>
.input-item {
  input[type=text], select {
    //display: block;
    display: inline-block;
    box-sizing: border-box;
    width: 100px;
    min-height: 36px;
    padding: 0 1em;
    border: 1px solid #e0e0e0;
    background: transparent;
    font-size: 12px;
    font-family: "Arial", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica", "sans-serif";
    line-height: 34px;
    outline: none;
    transition: .5s;
    &:focus {
      border-color: #2e9057;
      transition: .25s;
    }
  }
  select {
    padding-right: 0;
    width: 60px;
    margin-left: 10px;
  }

  &.error {
    input[type=text], textarea, select {
      border-color: #ff6152;
    }
  }
}
</style>